<template>
  <el-input class="group-inp"
    :disabled="disabled"
    :value="value"
    @blur="handleNumBlur"
    @input="handleNumInput"
    @change="handleNumChange"
  />
</template>

<script>
/**
 * <el-input>框自动校验,仅能填入数字，支持负数格式
 * 过滤规则: 仅能输入合法整数和小数格式 默认最少保留0位小数，最大保留6位小数
 * 示例：<my-input-number :value.sync="value"/>
 * @author LiuDaShun
 */
export default {
  name: 'MyInputNumber',
  props: {
    value: {
      type: [String, Number],
      default: ''
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    // 最大保留小数位数
    fixMax: {
      type: Number,
      default: 6
    },
    // 最小保留小数位数
    fixMin: {
      type: Number,
      default: 0
    },
    // 负数支持
    sign: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleNumInput (value) {
      // 替换掉除数字和小数点的其余字符及多个小数点的输入，过滤规则：仅能输入任意数字和至多一个小数点
      let val = value + ''
      val = val.replace(/。/g, '.') // 消除中文下不能输入.的问题
      // 负数支持
      let sign = this.sign && /^-/.test(val) ? '-' : ''
      val = val.replace(/[^\d.]/g, '')
      // val = val.split('.').length > 2 ? val.replace(/\.$/, '') : val
      // val = sign + val
      let afterVal = val.split('.')[1]
      if (afterVal && afterVal.length > this.fixMax) {
        val = val.split('.')[0] +'.'+ afterVal.substr(0, this.fixMax)
      }
      this.$emit('input', val)
      this.$emit('update:value', val)
    },
    handleNumChange (value) {
      let val = value + ''
      const patrn=/^([1-9]\d*|0)(\.\d*[1-9])?$/;
      if (!patrn.exec(val)) {
          val = ''
          this.$message.error('数值不合法！')
          this.$emit('valErr')
      }
      this.$emit('change', val)
      this.$emit('update:value', val)
    },
    handleNumBlur (event) {
      this.$emit('blur', event)
    }
  }
}
</script>

<style scoped>

</style>
